<!-- <template>
  <div class="article-detail-container">
    <div class="article-info">
      <h2 class="article-title">{{ article.title }}</h2>
      <p class="article-introduction">{{ article.introduction }}</p>
      <p class="article-author">作者: {{ author.nickname }}</p>
      <p class="article-views">阅读量: {{ article.views }}</p>
      <el-button v-if="!isAuthor" @click="followAuthor">关注作者</el-button>
      <el-button v-if="isAuthor" @click="editArticle">修改文章</el-button>
    </div>
    <div class="article-content">
      <v-md-preview :text="article.content"></v-md-preview>
    </div>
  </div>
</template>

<script>
import { createVuePreview } from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-preview.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
import axios from 'axios';

const Preview = createVuePreview({
  theme: vuepressTheme,
});

export default {
  components: {
    'v-md-preview': Preview,
  },
  data() {
    return {
      article: {},
      author: {},
      isAuthor: false,
    };
  },
  async mounted() {
    const articleId = this.$route.params.articleId;
    try {
      const articleResponse = await axios.get(`/article/detail/${articleId}`);
      this.article = articleResponse.data.data;
      const authorResponse = await axios.get(`/user/info/${this.article.authorId}`);
      this.author = authorResponse.data.data;
      const userId = localStorage.getItem('userId');
      this.isAuthor = userId === this.article.authorId.toString();
      if (!this.isAuthor) {
        await axios.post(`/article/increaseViews/${articleId}`);
        this.article.views++;
      }
    } catch (error) {
      console.error('获取文章详情出错', error);
    }
  },
  methods: {
    async followAuthor() {
      try {
        const response = await axios.post(`/user/follow/${this.author.id}`);
        if (response.data.code === 200) {
          alert('关注成功');
        } else {
          alert('关注失败');
        }
      } catch (error) {
        console.error('关注作者出错', error);
      }
    },
    editArticle() {
      this.$router.push({ name: 'WriteArticle', params: { articleId: this.article.id } });
    },
  },
};
</script>

<style scoped>
.article-detail-container {
  padding: 30px;
}

.article-info {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
  padding: 30px;
  margin-bottom: 30px;
}

.article-title {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 10px;
}

.article-introduction {
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
}

.article-author,
.article-views {
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
}

.article-content {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
  padding: 30px;
}
</style> -->